/*
 * Copyright (c) 2022. China Mobile (SuZhou) Software Technology Co.,Ltd. All rights reserved.
 * Lakehouse is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *          http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */

.sqlQueryClone {
  overflow-x: hidden;
}

.singleSqlQuery {
  .tabList {
    height: 100%;
    background: #fff;

    :global(.n-tabs
        .n-tabs-nav.n-tabs-nav--card-type
        .n-tabs-tab.n-tabs-tab--active) {
      border-bottom: 0px;
    }

    .addTabButton {
      float: left;
      height: 32px;
      width: 32px;
      background: rgb(240, 241, 245);
      border: 1px solid #d9d9d9;
      border-bottom: none;

      &:hover {
        cursor: pointer;
      }

      > i {
        margin: 11px 0 0 9px;
      }
    }
  }
}

/** query panel module*/
.queryPanel {
  background-color: #fff;
  height: calc(100vh - 195px);
  padding: 20px 20px 0 20px;
  overflow-x: hidden;

  .optionBar {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;

    button {
      padding-left: 15px;
      padding-right: 15px;
      width: 70px;
    }

    .span {
      width: 105px;
      text-align: right;
      margin-right: 6px;
      vertical-align: super;
      vertical-align: inherit;
      padding-top: 5px;
      display: inline-block;
    }

    .optionButtons {
      display: flex;
      justify-content: space-between;
      width: calc(100% - 660px);
    }

    .grammerButton {
      padding: 6px;
      color: #4759E4;

      &:hover {
        cursor: pointer;
        color: #6B7AE9;
        text-decoration: underline;
      }
    }

    .disabled {
      padding: 6px;
      color: #aeb3b8;

      &:hover {
        cursor: pointer;
        color: #aeb3b8;
        text-decoration: none;
      }
    }
  }

  .editor {
    .editorHeader {
      background-color: #28211c;
      color: #fff;
      font-size: 12px;
      padding: 4px;
      height: 25px;
      display: flex;
      margin: 0;
      padding: 6px 0 0 0;
      vertical-align: middle;

      > i {
        color: #4759E4 !important;
        font-size: 16px;
        margin-left: 10px;
        margin-right: 4px;
      }
    }
  }

  .editor-resize {
    position: absolute;
    height: 10px;
    background: #fff;
    left: calc(50% - 25px);
    z-index: 99999;
    user-select: 'none';
    overflow: hidden;

    > svg {
      width: 22px;
      height: 20px;
    }

    &:hover {
      cursor: s-resize;
    }
  }

  .fix-width-resize {
    height: 3px;
    // width: calc(100vw - 280px);
    position: fixed;
    top: -200px;
    background: #aeb3b8;
    opacity: 0.1;
    z-index: 1000;
  }
}

/** code editor */
.codeEditor {
  .CodeMirror {
    height: calc(100vh - 350px - 220px);
    background: #353535 !important;
    font-size: 14px;
    color: #ececec !important;

    pre {
      word-break: break-word;
    }

    :global(.CodeMirror-selected) {
      background: #ccc !important;
    }

    .CodeMirror-gutters {
      background-color: #000;
    }
  }

  .CodeMirror-hints {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 2px;
    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    border: 1px solid silver;
    background: white;
    font-size: 90%;
    font-family: monospace;
    max-height: 20em;
    overflow-y: auto;
  }

  .CodeMirror-hint {
    margin: 0;
    padding: 0 4px;
    border-radius: 2px;
    white-space: pre;
    color: black;
    cursor: pointer;
  }

  li.CodeMirror-hint-active {
    background: #08f;
    color: white;
  }

  .cm-s-bespin div.CodeMirror-selected {
    background: rgb(11, 104, 215) !important;
  }
}
